<template>
  <div>
    <my-form-drawer :title="title" :width="450" :visible="visible" @ok="edit" @cancel="onClose" :footer="type!=2">
      <a-form-model ref="form" :model="form" :rules="rules">
        <a-form-model-item label="黑名单词汇" prop="word">
          <a-input v-model="form.word" :maxLength="50" :disabled="type==2" />
        </a-form-model-item>
        <a-form-model-item label="错误等级" prop="errorLevel">
          <a-select
              style="select"
              v-model="form.errorLevel"
              @change="setWordType"
              :disabled="type==2"
            >
              <a-select-option v-for="(item, index) in itemList" :key="index" :value="item.value">{{ item.title }}</a-select-option>
            </a-select>
        </a-form-model-item>
        <a-form-model-item label="错误类型" prop="errorType">
          <a-tree-select v-model="form.errorType" show-search style="width: 100%"
            :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }" placeholder="请选择错误类型" allow-clear
            :tree-data="treeData" :disabled="type==2">
          </a-tree-select>
        </a-form-model-item>
        <a-form-model-item label="备注" prop="remark">
          <a-textarea v-model="form.remark" :rows="4" placeholder="请输入备注" :disabled="type==2" />
        </a-form-model-item>
        <!--
        <a-form-model-item label="敏感词类型" prop="wordType">
          !-- <a-input v-model="form.wordType" :maxLength="10" /> --
          <a-select
              style="select"
              v-model="form.wordType"
              @change="setWordType"
            >
              <a-select-option v-for="(item, index) in itemList" :key="index" :value="item.label">{{ item.label }}</a-select-option>
            </a-select>
        </a-form-model-item>
      -->
      </a-form-model>
    </my-form-drawer>
  </div>
</template>

<script>
import moment from 'moment';
import { add, update } from '@/services/word';
import { itemList } from "@/services/word";
import MyFormDrawer from '@/components/drawer/MyFormDrawer';

export default {
  name: 'UserForm',
  components: { MyFormDrawer },
  data() {
    return {
      type: '0', //0添加，1编辑
      title: '',
      form: {
        word: '',
        errorLevel: '',
        errorType: '',
        remark: '',
        sensitiveType: 'BLACK',
      },
      itemType: 'blackword_errorlevel',
      itemList: [],
      treeData: [],
      treeType: 'blackword_errortype',
      visible: false,
      rules: {
        word: [{ required: true, message: '敏感词不能为空', trigger: 'change' }],
        errorLevel: [{ required: true, message: '错误等级不能为空', trigger: 'change' }],
        errorType: [{ required: true, message: '错误类型不能为空', trigger: 'change' }],
      },
      page: {
        currentPage: 1,
        pageSize: 10,
      },
    };
  },
  computed: {},
  created() {
    this.getItemList()
    this.getTypeList()
  },
  methods: {
    getItemList() {
      itemList({ type: this.itemType }).then(res => {
        const { data } = res.data;
        this.itemList = data.map(m => {
          return {
            title: m.label,
            value: m.value
          }
        });
      });
    },
    getTypeList() {
      itemList({ type: this.treeType }).then(res => {
        const { data } = res.data;
        this.treeData = data.filter(m => m.value.length == 3).map(m => {
          return {
            key: m.id,
            title: m.label,
            value: m.value,
            children: data.filter(n => n.value != m.value && n.value.indexOf(m.value) == 0).map(n => {
              return {
                key: n.id,
                title: n.label,
                value: n.value
              }
            })
          }
        })
      })
    },
     setWordType(value) {
      this.form.wordType = value
      console.log(this.form.wordType);
    },
    moment,
    initData() {
      this.form = {
        word: '',
        errorLevel: '',
        errorType: '',
        remark: '',
        sensitiveType: 'BLACK',
      };
    },

    changeForm(state, action, data) {
      this.visible = state;
      this.type = action;
      switch (this.type) {
        case 0: this.title = '新增黑名单词汇'; break;
        case 1: this.title = '编辑黑名单词汇'; break;
        case 2: this.title = '查看黑名单词汇'; break;
      }
      if (this.type) {
        this.form = Object.assign(this.form, data);
        console.log(this.form);
      }
    },
    onClose() {
      this.visible = false;
      this.$refs['form'].clearValidate();
      this.initData();
    },
    edit() {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false;
        }
        if (this.type) {
          update(this.form).then((res) => {
            console.log(res);
            if (res.data.code === 0) {
              this.$message.success('修改成功');
              this.onClose();
              this.$emit('getList');
            }
          });
        } else {
          add(this.form).then((res) => {
            console.log(res);
            if (res.data.code === 0) {
              this.$message.success('添加成功');
              this.onClose();
              this.$emit('getList');
            }
          });
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>

</style>
